<template>
<div>
    <div
        class="popup"
        :style="{
            background: context_color,
            bottom: distance_bottom + 'px',
            transform: !is_popup
                ? 'translateY(calc(100% + ' + distance_bottom + 'px))'
                : '',
            'z-index': popup_floor - 1,
        }"
    >
        <slot></slot>
    </div>
    <div
        v-if="is_popup"
        class="popup-mode"
        @click="show_popup"
        :style="{ bottom: distance_bottom + 'px', 'z-index':is_popup?popup_floor - 2:-99999,'opacity':is_popup?1:0}"
    ></div>
</div>
</template>
<script setup>
let emits = defineEmits(["em_show_popup"]);
let props = defineProps({
    // 是否显示
    is_popup: {
        type: Boolean,
        default: false,
    },
    // 不被覆盖的z-index
    popup_floor: {
        type: Number,
        default: 5,
    },
    //区域距离底部的距离
    distance_bottom: {
        type: Number,
        default: 0,
    },
    // 背景颜色
    context_color: {
        type: String,
        default: "#ffffff",
    },
    // 方向
    direction: {
        type: String,
        default: "bottom",
    },
});

const show_popup = () => {
    emits("em_show_popup", props.is_popup);
};
</script>

<style lang="scss">
.popup {
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    transition: all 0.2s;
    border-radius: 10px 10px 0 0;
}
.popup-show {
    transform: translateY(100%);
}

.popup-mode {
    width: 100%;
    height: 100%;
    position: fixed;
    margin: auto;
    background: rgba($color: #000000, $alpha: 0.5);
    transition: opacity 0.2s;
}
</style>
